import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import { StyleSheet, TouchableOpacity } from 'react-native';

import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { useMode } from '@/utils/ModeContext';
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function ModeSelectionScreen() {
  const router = useRouter();
  const { setUserMode } = useMode();

  const handleModeSelection = async (mode: 'enterprise' | 'personal') => {
    // 保存用户选择的模式
    setUserMode(mode);
    await AsyncStorage.setItem('MODE', mode);
    await AsyncStorage.setItem('userMode', mode); // 同时设置两个键，确保兼容性
    // 导航到主应用
    router.replace('/(tabs)');
  };

  return (
    <ThemedView style={styles.container}>
      {/* 主要内容 */}
      <ThemedView style={styles.content}>
        {/* 标题区域 */}
        <ThemedView style={styles.headerSection}>
          <ThemedText style={styles.title}>
            岗前安全健康速测仪
          </ThemedText>
          <ThemedText style={styles.subtitle}>
            专业的安全健康检测设备
          </ThemedText>
        </ThemedView>

        {/* 模式选择区域 */}
        <ThemedView style={styles.modeSection}>
          <ThemedText style={styles.modeTitle}>
            请选择使用模式
          </ThemedText>
          
          {/* 企业模式 */}
          <TouchableOpacity
            style={styles.modeCard}
            onPress={() => handleModeSelection('enterprise')}
            activeOpacity={0.9}
          >
            <LinearGradient
              colors={['#ffffff', '#f8f9fa']}
              style={styles.cardGradient}
            >
              <ThemedView style={styles.cardContent}>
                <ThemedView style={styles.iconContainer}>
                  <Ionicons name="business" size={40} color="#0a7ea4" />
                </ThemedView>
                <ThemedText style={styles.cardTitle}>
                  企业模式
                </ThemedText>
                <ThemedText style={styles.cardDescription}>
                  适用于企业员工岗前健康检查
                </ThemedText>
                {/*<ThemedView style={styles.featuresList}>*/}
                {/*  <ThemedText style={styles.featureItem}>• 批量管理和数据统计</ThemedText>*/}
                {/*  <ThemedText style={styles.featureItem}>• 员工健康档案管理</ThemedText>*/}
                {/*  <ThemedText style={styles.featureItem}>• 合规性报告生成</ThemedText>*/}
                {/*</ThemedView>*/}
              </ThemedView>
            </LinearGradient>
          </TouchableOpacity>

          {/* 个人模式 */}
          <TouchableOpacity
            style={styles.modeCard}
            onPress={() => handleModeSelection('personal')}
            activeOpacity={0.9}
          >
            <LinearGradient
              colors={['#ffffff', '#f8f9fa']}
              style={styles.cardGradient}
            >
              <ThemedView style={styles.cardContent}>
                <ThemedView style={styles.iconContainer}>
                  <Ionicons name="person" size={40} color="#0a7ea4" />
                </ThemedView>
                <ThemedText style={styles.cardTitle}>
                  个人模式
                </ThemedText>
                <ThemedText style={styles.cardDescription}>
                  适用于个人健康自测
                </ThemedText>
                {/*<ThemedView style={styles.featuresList}>*/}
                {/*  <ThemedText style={styles.featureItem}>• 简单快捷的健康检查</ThemedText>*/}
                {/*  <ThemedText style={styles.featureItem}>• 个人健康数据记录</ThemedText>*/}
                {/*  <ThemedText style={styles.featureItem}>• 健康趋势分析</ThemedText>*/}
                {/*</ThemedView>*/}
              </ThemedView>
            </LinearGradient>
          </TouchableOpacity>
        </ThemedView>

        {/* 底部信息 */}
        <ThemedView style={styles.footerSection}>
          <ThemedText style={styles.footerText}>
            安全健康检测专家
          </ThemedText>
          <ThemedText style={styles.footerSubText}>
            专业 · 安全 · 可靠
          </ThemedText>
        </ThemedView>
      </ThemedView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    flex: 1,
    padding: 20,
    justifyContent: 'space-between',
  },
  headerSection: {
    alignItems: 'center',
    marginTop: 60,
    marginBottom: 40,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#0a7ea4',
    textAlign: 'center',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
  },
  modeSection: {
    flex: 1,
    justifyContent: 'center',
    gap: 20,
  },
  modeTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
    textAlign: 'center',
    marginBottom: 20,
  },
  modeCard: {
    borderRadius: 16,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 8,
    },
    shadowOpacity: 0.25,
    shadowRadius: 12,
    elevation: 12,
  },
  cardGradient: {
    borderRadius: 16,
    padding: 24,
  },
  cardContent: {
    alignItems: 'center',
  },
  iconContainer: {
    width: 70,
    height: 70,
    borderRadius: 35,
    backgroundColor: 'rgba(10, 126, 164, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 16,
  },
  cardTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#0a7ea4',
    marginBottom: 8,
  },
  cardDescription: {
    fontSize: 14,
    color: '#666',
    textAlign: 'center',
    marginBottom: 16,
  },
  featuresList: {
    alignItems: 'center',
  },
  featureItem: {
    fontSize: 12,
    color: '#888',
    lineHeight: 18,
    marginBottom: 4,
  },
  footerSection: {
    alignItems: 'center',
    marginTop: 20,
  },
  footerText: {
    fontSize: 12,
    color: '#999',
    marginBottom: 4,
  },
  footerSubText: {
    fontSize: 10,
    color: '#ccc',
  },
}); 